<template>
    <div class="title-top flex center" :style="{borderBottom:border==true?'1px  solid F2F2F2;':'none'}">
         <div class="title-left flex flexR">
              <div class="title-top-line"></div>
              <div>{{title}}</div>
         </div>
         <!-- 按钮操作 -->
         <div v-if="button" class="btn_flex" @click="toClickBtn">
                <el-button type="primary"  size="mini">{{btitle}}</el-button>
         </div>
         <!-- 文字操作 -->
         <div v-if="!button&&btitle" class="btn_title_flex" @click="redirectPath">
                  <div>更多</div>
         </div>
    </div>
</template>


<script>
export default {
       name:"viewTitle",
       props:{
             title:{
                  type:String,
                  default:"1"
             },
             border:{
                  type:Boolean,
                  default:false
             },
             button:{
                  type:Boolean,
                  default:false
             },
             btitle:{
                   type:String,
                   default:null
             },
             redirect_path:{            //需要跳转的页面
                    type: String,
                    default: null
             }

       },
       data(){
            return {}
       },
       methods:{
             toClickBtn(){
                      console.log("点击准备传参")
                      this.$emit('clickBtn',{})
             },
             redirectPath(){
                  if(this.redirect_path)     this.$router.push(this.redirect_path);
             }
       }
}
</script>


<style lang="less"  :scope="true" >
       .title-top{
              height: 45px;
              background: #ffffff;
              justify-content: space-between;
              .title-top-line{
                 width: 3px;
                 height: 19.2px;
                 background: #558FFB;
                 margin: 0  10px;
                 
              }
              .title-left{
                         height: 45px;
                         align-items: center;
                         font-size: 14px;
                         background: #ffffff;
                         color: #000000;      
                         font-weight: 500;   
                         letter-spacing: 2px;
              }
              .btn_flex{
                    min-width: 100px;
                    max-width: auto;
                    margin-right: 25px;
              }
              .btn_title_flex{
                    min-width: 80px;
                    max-width: auto;
                    margin-right: 15px; 
                    color: #0000FF;      
                    font-size: 14px; 
                    cursor: pointer;          
              }
       }
</style>